<template>
  <div class="all">
     <header v-if='showNav'>
       <div class="div">
         <img src="../../../assets/返回.png" @click="back()" alt="">
         <span class="solid" @click="back()">返回</span>
       </div>
       <div class="div">
         <span>{{team_id ? '服务项目组合' : '我的项目组合'}}</span>
       </div>
       <div class="div">
         <img @click="add" src="../../../assets/蓝添加.png" alt="">
         <span @click="add" class="solid">新增</span>
       </div>
     </header>
    <div class="menu" :class="{'show':!showNav}">
      <ul @click="getData()">
        <li :class="[del_tag == 2 ? 'select' : '']"
        @click="del_tag = 2"
        >未发布</li>
        <li :class="[del_tag == 0 ? 'select' : '']"
        @click="del_tag = 0"
        >已发布</li>
        <li :class="[del_tag == 1 ? 'select' : '']"
        @click="del_tag = 1"
        >下架</li>
      </ul>
    </div>
    <div class="loading"  v-show="isLoading">
      <van-loading  size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
    </div>
    <van-empty
      style="width: 100%;height: 60%"
      v-show="dataList.length <= 0 && isLoading === false"
      class="custom-image"
      :image="require('../../../assets/空两本书.png')"
      description="暂无数据"
    />
    <div class="box"   @click="lookHis(item)" v-for="(item, index) in dataList" :key="index">
<!--      @click.stop="update(item)"-->
      <div class="box_header">
        <span style="display: flex;align-items: center">
           <img src="../../../assets/服务包.png" alt="">
          {{item.package_name}}
        </span>
       <span style="display: flex;flex-direction: column">
         <a style="color: #E3170D;font-size: 13px">￥{{item.rebate_amount}}</a>
         <s style="color: #999;font-size: 11px" v-show="item.rebate_amount !== item.standard_amount">￥{{item.standard_amount}}</s>
       </span>
      </div>
      <div class="box_content">
        <p>可购买时间：{{item.buy_start_date}}至{{item.buy_end_date}}</p>
        <p>首次使用时间：{{item.use_start_date}}至{{item.use_end_date}}</p>
        <p>使用有效期：{{item.val_days}}天</p>
        <p class="textContent">项目组合项目：
<!--          <span v-show="item.itemList[0].item_type == 1">图文咨询 - </span>-->
<!--          <span v-show="item.itemList[0].item_type == 2">视频咨询 - </span>-->
<!--          <span v-show="item.itemList[0].item_type == 3">居家康复 - </span>-->
<!--          <span v-show="item.itemList[0].item_type == 4">居家护理 - </span>-->
          {{item.itemList[0].item_id}} {{item.itemList[0].times}}次...
        </p>
        <p v-show="item.del_tag == 2">操作时间：{{item.created_at}}</p>
        <p v-show="item.del_tag == 0">发布时间：{{item.up_at}}</p>
        <p v-show="item.del_tag == 1">下架时间：{{item.down_at}}</p>
      </div>
      <div class="box_bottom" >
        <button class="xiajia" @click.stop="deleteBtn(item)" v-show="item.del_tag == 0">下架</button>
        <button @click.stop="update(item)" class="update" v-show="item.del_tag == 2">修改</button>
        <button @click.stop="fabu(item)" v-show="item.del_tag == 2">发布</button>
        <button @click.stop="reshelf(item)" class="cxBtn" v-show="item.del_tag == 1">重新上架</button>
      </div>
    </div>
    <van-dialog v-model="delshow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认下架此条记录吗？"
                @confirm="delConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="fabuShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认发布此条记录吗？"
                @confirm="fabuConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'ServicePackList',
  data () {
    return {
      showNav: this.$route.query.showNav != 1,
      team_id: this.$route.query.team_id,
      dataList: [],
      ITEM: '',
      ITEMindex: '',
      delshow: false,
      fabuShow: false,
      del_tag: '2',
      isLoading: true
    }
  },
  mounted () {
    if (this.showNav) {
      document.title = '我的项目组合'
    } else {
      document.title = '项目组合维护'
    }
    if (sessionStorage.getItem('del_tag') !== undefined && sessionStorage.getItem('del_tag') !== null) {
      this.del_tag = sessionStorage.getItem('del_tag')
    }
    this.getData()
  },
  methods: {
    fabu (item) {
      this.ITEM = item
      this.fabuShow = true
    },
    fabuConfirm () {
      this.$http.updatePackageStatus({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            Toast('发布成功')
            this.getData()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    reshelf (item) {
      this.$router.push({path: '/keepServicePack', query: {id: item.id, isEdit: 1, reshelf: 1, team_id: this.team_id}})
    },
    update (item) {
      this.$router.push({path: '/keepServicePack', query: {id: item.id, isEdit: 1, team_id: this.team_id}})
    },
    // 查看历史记录
    lookHis (item) {
      this.$router.push({path: '/keepServicePack', query: {id: item.id, isEdit: 0, team_id: this.team_id}})
    },
    deleteBtn (item) {
      this.ITEM = item
      this.delshow = true
    },
    //
    delConfirm () {
      this.$http.deletePackage({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            Toast('下架成功')
            this.getData()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getData () {
      this.dataList = []
      this.isLoading = true
      this.$http.findPackage({del_tag: this.del_tag, team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.dataList = res.data.data
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 新增
    add () {
      this.$router.push({path: '/keepServicePack', query: {team_id: this.team_id}})
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  },
  destroyed () {
    sessionStorage.removeItem('servicePackData')
    sessionStorage.setItem('del_tag', this.del_tag)
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
  header{
     width: 100%;
     height: 44px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #E5E5E5;
     background: white;
     position: sticky;
     top: 0;
     z-index: 9;
   }
   .div{
     width: 33%;
     height: 100%;
     display: flex;
     align-items: center;
     font-family: "PingFang SC";
     font-size: 15px;
     font-weight: bold;
   }
   .div img{
     margin-right: 5px;
   }
   .div:nth-child(1) img{
     height: 13px;
     width: 7px;
     margin-left: 15px;
   }
   .div:nth-child(3) img{
     width: 14px;
     height: 14px;
     margin-right: 3px;
   }
   .div:nth-child(3) span{
     margin-right: 15px;
   }
   .div:nth-child(2){
     justify-content: center;
   }
   .div:nth-child(3){
     justify-content: flex-end;
   }
   .solid{
     color: #1DA4F2;
   }
   .menu{
     width: 100%;
     height: 44px;
     background: white;
     display: flex;
     align-items: center;
     justify-content: center;
     position: sticky;
     top: 44px;
   }
   .menu.show{ top: 0 }
  .menu ul{
    display: flex;
    align-items: center;
    border-radius: 5px;
    border: 2px solid #1DA4F2;
    overflow: hidden;
  }
  .menu ul li:nth-child(2) {
    border-left: 2px solid #1DA4F2;
    border-right: 2px solid #1DA4F2;
  }
  .menu ul li{
     width: 90px;
     height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
   }
  .select{
    background: #1DA4F2;
    color: white;
  }
  .box{
    width: 92%;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    margin: 10px auto;
    padding: 5px 10px;
    box-sizing: border-box;
    background: white;
  }
  .box_header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .box_header img{
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }
  .box_content p {
    height: 25px;
    line-height: 25px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }
  .textContent{
    width: 80%;
    display: block !important;
    /*//单行*/
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .box_bottom{
    height: 40px;
    display: flex;
    align-items: center;
    display: flex;
    justify-content: flex-end;
  }
  .update{
    background: transparent !important;
    border: 1px solid #1DA4F2 !important;
    margin-left: 15px;
  }
  .cxBtn{
    width: 90px !important;
  }
  .xiajia{
    color: #E3170D !important;
    background: rgba(227, 23, 13, 0.1) !important;
  }
  .box_bottom button{
    width: 60px;
    height: 29px;
    font-size: 15px;
    border-radius: 5px;
    background: rgba(29, 164, 242, 0.1);
    border: none;
    color: #1DA4F2;
    margin-left: 15px;
  }
  .loading{
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
